<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>suspect</title>
<link  href="xmindesign/style/jsmind.css" rel="stylesheet" type="text/css">
<link href="jquery_superslide/css/fishBone.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
#jsmind_container {
	height: 750px;
	border: solid 1px #ccc;
	background-color: #FFFFFF;
}
 
body {
	background-color: #FDFDFD;
}
.txt{
	font-style: italic;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;		
}
.first-child{
	background-color:#2556C7 ;
	color:#fff;
	border-radius: 5px;
}
</style>
<script src="xmindesign/js/jsmind.js"></script>
<script src="jquery/js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="jquery_superslide/js/fishBone.js"></script>
<script src="jquery_superslide/js/jquery.SuperSlide.2.1.1.js"></script>
<script  src="layer-2-1/layer.js"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script  src="zoomcharts/zoomcharts.js"></script>
<script>
	data = [{'审理时间':'2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号(当前案件)'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号(当前案件)'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号(当前案件)'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号(当前案件)'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号(当前案件)'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号(当前案件)'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号'},{'审理时间': '2016-12-20 至 2016-12-20','承办庭室':'XXXX','承办法官':'XXX','承办法院':'XXXXXXX法院','案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号(当前案件)'}];
	
</script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/miama:n4:default.js" type="text/javascript"></script>
</head>

<body>
<div id="jsmind_container"   ></div>
<div  class="fishBone" style="height: auto; z-index:4 ;background-color:#FFFFFF;display: none  "  ></div>
<script type="text/javascript">

var mind = {
    /* 元数据，定义思维导图的名称、作者、版本等信息 */
    "meta":{
        "name":"jsMind-demo-tree",
        "author":"hizzgdev@163.com",
        "version":"0.2"
    },
    /* 数据格式声明 */
    "format":"node_tree",
    /* 数据内容 */
    "data":{"id":"root","topic":"<div style=\"text-align:center;\"><p  style=\"font-size:15px;margin-top:15px;\">嫌疑人照片</p><img width=\"50%\" height=\"50%\"  src=\"suspect.jpg\" style=\"\"></div>","direction":"left","children":[
        {"id":"easy","topic":"<div class='first-child'>基础信息</div>","direction":"right","expanded":true,"children":[
            {"id":"easy1","topic":"<b>姓名</b> ","expanded":false,"children":[
				{"id":"easy11","topic":"<span>别名</span> <span class='txt'>蒙多</span> "},
				{"id":"easy12","topic":"<span>婚姻</span> <span class='txt'>未婚</span>"},
				{"id":"easy13","topic":"<span>身份证</span> <span class='txt'>xxxxxxxxxx</span>"},
				{"id":"easy14","topic":"<span>国籍</span>"},
				{"id":"easy15","topic":"性别  <i class='fa fa-mars-stroke'></i> "},
				{"id":"easy16","topic":"性格"}
			]},
            {"id":"easy2","topic":"<b>家庭住址/现住地</b>","expanded":false,"children":[
				{"id":"easy21","topic":"<span>文化程度</span>"},
				{"id":"easy22","topic":"<span>公司/职务</span>"},
				{"id":"easy23","topic":"<span>个人爱好</span>","expanded":false,"children":[
					{"id":"easy231","topic":"常去地"},
					{"id":"easy232","topic":"生活习惯/名词"}
				]}
			]},
            {"id":"easy3","topic":"<b>宗教信仰  民族</b>"},
            {"id":"easy4","topic":"<b>指纹编号 DNA编号</b>"}
        ]},
        {"id":"open","topic":"<div class='first-child'>账号信息</div>","direction":"right","children":[
			{"id":"open1","topic":"<b>微信</b>","expanded":false,"children":[
				 {"id":"open11","topic":"<span>A账号 归属</span>"},
				 {"id":"open12","topic":"<span>B账号 归属</span>"}
			]},
            {"id":"open2","topic":"<b>QQ</b>"},
            {"id":"open3","topic":"<b>银行卡号</b>"},
			{"id":"open4","topic":"<b>支付宝</b>"},
			{"id":"open5","topic":"<b>财付通</b>"}
        ]},
        {"id":"powerful","topic":"<div class='first-child'>通讯信息</div>","direction":"right","children":[
            {"id":"powerful1","topic":"<b>微信聊天</b>"},
			{"id":"powerful2","topic":"<b>通话记录</b>"},
			{"id":"powerful3","topic":"<b>QQ聊天</b>"},
			{"id":"powerful4","topic":"<b>通讯录</b>"}
        ]},
        {"id":"other","topic":"<div class='first-child'>财产信息</div>","direction":"right", "children":[
            {"id":"other1","topic":"<b>银行卡转账</b>"},
            {"id":"other2","topic":"<b>支付宝</b>","expanded":false,"children":[
			   {"id":"other21","topic":"<span>提取主要账单</span>"},
			   {"id":"other22","topic":"<span>可以历年筛选账单</span>"},
			   {"id":"other23","topic":"<span>获取主要转账人物</span>"},
			   {"id":"other24","topic":"<span>主要消费场所</span>"}
			]},
			{"id":"other3","topic":"<b>淘宝</b>"},
			{"id":"other4","topic":"<b>微信</b>  微信红包"}
        ]},
		{"id":"livenviro","topic":"<div class='first-child'>生活环境</div>","children":[
			{"id":"livenviro1","topic":"<b>消费习惯</b>"},
			{"id":"livenviro2","topic":"<b>交友范围</b>"}
		]},
		{"id":"relationet","topic":"<div class='first-child'>关系网络</div>","children":[
			{"id":"relationet1","topic":"<b style=\"background-color:#E8143C;border-radius:5px\">亲密关系</b> <a href=\"friend-net.html\"><i class='fa fa-tripadvisor fa-lg'></i></a> "},
			{"id":"relationet2","topic":"<b>团伙</b>","expanded":true,"children":[
				{"id":"relationet21","topic":"<span>照片</span>","expanded":true,"children":[
					{"id":"relationet211","topic":"<span style=\"background-color:#E8143C;border-radius:5px\">生活照</span>  <a href=\"jqeryMasonry/index.html\"><i class='fa fa-picture-o fa-lg'></i></a>"},
					{"id":"relationet212","topic":"主要人物照"}
				]},
				{"id":"relationet22","topic":"<span>活动范围</span>","expanded":false,"children":[
					{"id":"relationet221","topic":"公共场所","expanded":false,"children":[
						{"id":"relationet2211","topic":"KTV"},
						{"id":"relationet2212","topic":"酒吧"},
						{"id":"relationet2213","topic":"电影院"}
					]},
					{"id":"relationet222","topic":"重点聚集地"},
					{"id":"relationet223","topic":"活动时间 区分密集活动时间"}
				]},
				{"id":"relationet23","topic":"<span>人物关系</span>"},
				{"id":"relationet24","topic":"<span>应用</span>","expanded":false,"children":[
					{"id":"relationet241","topic":"微信 提取黑话"},
					{"id":"relationet242","topic":"QQ"},
					{"id":"relationet243","topic":"通讯录"}	
				]},
				{"id":"relationet25","topic":"<span>团伙时间线</span>"},
				{"id":"relationet26","topic":"<span>新团伙时间线</span>"}
			]},
			{"id":"relationet3","topic":"<b>社交关系</b>"}
		]},
		{"id":"involve","topic":"<div class='first-child'>涉案信息</div>","children":[
			{"id":"involve1","topic":"<b>是否有涉入其他案件</b> -能够有百分比"},
			{"id":"involve2","topic":"<b style=\"background-color:#E8143C;border-radius:5px\" >前科</b>  <i class='fa fa-reddit-alien fa-lg' onMouseDown=\"layerout();\"></i>"},
			{"id":"involve3","topic":"<b>罪名</b>"},
			{"id":"involve4","topic":"<b>编号</b>"}
		]},
		{"id":"time","topic":"<div class='first-child'>时间</div>","children":[
			{"id":"time1","topic":"<b>时间线</b>","expanded":false,"children":[
				{"id":"time11","topic":"<span>微信</span>"},
				{"id":"time12","topic":"<span>QQ</span>"},
				{"id":"time13","topic":"<span>通讯录</span>","children":[
					{"id":"time131","topic":"历年时间筛选"},
					{"id":"time132","topic":"通讯录其他关联"}
				]},
				{"id":"time14","topic":"<span>短信</span>"}
			]},
			{"id":"time2","topic":"<b>空间</b>  时空活动轨迹"}
		]},
		{"id":"mark","topic":"<div class='first-child'>标记信息</div>"}
		
    ]}
};
    var options = {                   // options 将在下一章中详细介绍
        container:'jsmind_container', // [必选] 容器的ID，或者为容器的对象
        editable:false,                // [可选] 是否启用编辑
        theme:'orange'                 // [可选] 主题             
    };
   
 
function layerout(){
	$(".fishBone").css("display","block");
	
	var h=$(document).height();
 	layer.open({
	  type: 1,
  	  //skin: 'layui-layer-rim', //加上边框
	  area:'500px',
	  offset:h/5+'px',
      content:$(".fishBone"),
	  scrollbar: false,//锁定浏览器
	  cancel:function(){
		$(".fishBone").css("display","none");
     	}

	});	
	 $(".fishBone").fishBone(data);
}

	
	
		
$(function(){
	//$("#ffish").hide();
	 var jm = new jsMind(options);
    jm.show(mind);
	$('#layout').click(function(){
        $('#demo').css('display','block');
    });
     
    $(document).on('click',function(e){
        if(!$(e.target).is($('#layout')) && !$(e.target).is($('#demo')) && $(e.target).closest('#demo').length === 0){
        $('#demo').css('display','none');
        }
    });

});

 
</script>
</body>
</html>
